<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:o="http://openfaces.org/"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<script type="text/javascript" src="js/vidadtag.js" />
	<script>
		$(document).ready(function () {
			//PrimeFaces.escapeClientId('#j_idt6:tag') == "#j_idt6\\:tag"
			console.log("document ready function " + $("#j_idt6\\:tag").prop("tagName"));
		    $("#j_idt6\\:tag").focus();
		   });
	</script>
	<script type="text/javascript">
		var paused = false;
		var videoId="#{videoTagCollector.videoId}";
		
		function setTagFormHiddens(){
			var vid = document.getElementById("myvid");
			var time = document.getElementById("j_idt6:videoTimeStamp");
			time.value = vid.currentTime;
			var id = document.getElementById("j_idt6:videoId");
			id.value = videoId
		}
		function videoClicked(){
			var vid = document.getElementById("myvid");
			if(!paused){				
				vid.pause();
				paused = true;
				console.log("video paused at " + vid.currentTime)
			}else{
				vid.play();
				paused = false;
				console.log("video continuted at " + vid.currentTime)
			}
		}

	</script>
</h:head>

<h:body>
	<h2>Vidadtag server is running</h2>
	<br />
	<!-- see http://stackoverflow.com/questions/5231817/html5-video-tag-jsf2 -->
	<video width="320" height="240" autoplay="autoplay" id="myvid"
		onclick="videoClicked()">
		<source src="rest/video/get/vid/#{videoTagCollector.videoId}"
			type="video/mp4"></source>
		<!-- Your browser does not support the video tag. -->
	</video>
	<br />
	<!-- http://stackoverflow.com/questions/9090850/jquery-auto-complete-with-jsf -->
	<f:view>
			<h:form>
				<h:panelGrid columns="2">
					<h:outputLabel value="tag" />
					<o:inputText id="tag" value="#{videoTagCollector.tagName}"
						focusedStyle="background: Cornsilk" />
					
					<o:suggestionField value="#{videoTagCollector.tagName}"
						customValueAllowed="true" autoComplete="true"
						suggestionMode="custom" suggestionDelay="50"
						suggestionMinChars="1">
						<o:dropDownItems value="#{autoComplete.suggestedTags}"/>
					</o:suggestionField>
					
					<!-- http://stackoverflow.com/questions/5335081/how-to-use-autocomplete-of-richfaces-with-table-layout -->
					<h:inputHidden id="videoTimeStamp"
						value="#{videoTagCollector.videoTimeStamp}" />
					<h:inputHidden id="videoId" value="#{videoTagCollector.videoId}" />
				</h:panelGrid>
				<h:commandButton id="addbutton" value="Add"
					onclick="setTagFormHiddens()">
					<f:ajax event="click" listener="#{videoTagCollector.add}"
						execute="@form" render=":status :tags" />
				</h:commandButton>

				<h:commandButton id="resetbutton" value="Reset">
					<f:ajax event="click" listener="#{videoTagCollector.reset}"
						execute="@form" />
					<o:confirmation for="resetbutton" />
				</h:commandButton>
				<br />
			</h:form>
	<h:outputText id="status" value="#{videoTagCollector.status}" />
	<o:dataTable id="tags" value="#{videoTagCollector.tags}" var="tag">
		<o:column>
			<h:outputText value="#{tag}" />
		</o:column>
	</o:dataTable>
	</f:view>
</h:body>
</html>
